import React, { Component } from 'react';
import {
    StyleSheet, Text, View, Image, TouchableOpacity, Alert, PixelRatio,
} from "react-native";
import { GLOBAL } from '../../config/global';
import { homeModulesIcon } from '../../config/definition';
import { style } from '../../theme/style';
import { Common } from '../../component/common/Common';

const scale = GLOBAL.SCALE;

export class RequirementPlanIndexPage extends Component {
    static navigationOptions = ({ navigation, navigationOptions }) => {
        return {
            headerTitle: '需求计划',
            headerTintColor: style.color.white,
            headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
            headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../imgs/goBackEmpty.png')} />),
            headerStyle: {
                elevation: 0,
                backgroundColor: style.color.themeColor,
            },
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center'
            }
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            pageStatus: {
                status: 'loading'
            },
            imgDefault: false
        };
    }

    componentWillMount () {

    }


    render () {
        const { pageStatus, imgDefault } = this.state;
        const { params } = this.props.navigation.state;
        console.log(params);
        return (
            <View style={styles.container}>
                {
                    // pageStatus.status === 'data' ?
                    (
                        <View>
                            {
                                params && params.map((item, index) => {
                                    const defaultImg = homeModulesIcon[item.resUrl];
                                    const imgUri = { uri: item.pageIcon };
                                    return (
                                        <View key={index} style={styles.item}>
                                            <TouchableOpacity style={styles.itemTouch} activeOpacity={1} onPress={() => {
                                                item.isHidden === 0 ? Alert.alert('该功能努力开发中，尽请期待') : this.props.navigation.navigate(item.resUrl);
                                            }}>
                                                <Image style={styles.left}
                                                    source={item.pageIcon ? (imgDefault ? defaultImg : item.pageIcon) : defaultImg}
                                                    onError={(e) => {
                                                        this.setState({ imgDefault: true })
                                                    }} />
                                                <View style={styles.content}><Text style={styles.contentText}>{item.resName}</Text></View>
                                                <View style={styles.right}>
                                                    {item.num ?
                                                        (
                                                            <View style={styles.rightNum}>
                                                                <Text style={styles.rightNumText}>2</Text>
                                                            </View>
                                                        )
                                                        : (null)}
                                                    <Image style={styles.rightImg} source={require('../../imgs/arrow-left.png')} />
                                                </View>
                                            </TouchableOpacity>
                                        </View>
                                    )
                                })
                            }
                        </View>)
                    // : (<View style={styles.menuCell}><PageStatusIndex {...pageStatus} /></View>)   //页面加载状态
                }
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    item: {
        height: 80 * scale,
        flexDirection: 'row',
        paddingTop: 17 * scale,
        paddingBottom: 17 * scale,
        marginLeft: 22 * scale,
        marginRight: 22 * scale,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
        borderColor: '#e4e4e4'
    },
    itemTouch: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    left: {
        marginRight: 17 * scale,
        width: 42 * scale,
        height: 42 * scale,
    },
    content: {
        flex: 1,
    },
    contentText: {
        fontSize: 14 * scale,
        color: '#404040'
    },
    right: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    rightNum: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 14 * scale,
        height: 14 * scale,
        marginRight: 8 * scale,
        backgroundColor: style.color.themeColor,
        borderRadius: 7 * scale
    },
    rightNumText: {
        fontSize: 10 * scale,
        color: '#fff',
    },
    rightImg: {
        width: 6 * scale,
        height: 11 * scale,
    },
})